<template>
  <div class="HomeType">
    <div class="wrapper">
      <div class="header">
        <router-link
          tag="div"
          to="/home"
          class="header_left iconfont icon-guanbi"
        ></router-link>
        <div class="header_center">{{ title }}</div>
        <div class="header_right"></div>
      </div>
      <div class="screen">
        <van-dropdown-menu active-color="#fd9124">
            <van-dropdown-item v-model="value1" :options="option1" />
            <van-dropdown-item v-model="value2" :options="option2" />
        </van-dropdown-menu>
      </div>

        <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        >
      <div class="bodyer">
        <ul>
            <li v-for="item in list" :key="item.productId" @click="information(item.productId,item.appImageUrl)">
                <div class="img">
                    <img :src="'https://qiniu-cdn0.jinxidao.com/'+item.appImageUrl" alt="">
                    <div class="imgtop">
                        <div class="price">
                            <div class="newprice"><strong>￥{{item.price}} <span>起</span></strong></div>
                            <div class="oldprice"><del>￥{{item.retailPrice}}</del></div>
                        </div>
                        <div class="sole">已售{{item.saledCount}}</div>
                    </div>
                </div>
                <p class="describe"><strong>{{item.appMainTitle}}-</strong>{{item.appSubTitle}}</p>
                <div class="tip">
                    <ul>
                        <li>{{item.city}}</li>
                        <li v-for="(items,index) in item.showTagList" :key="index">{{items.tagName}}</li>
                    </ul>
                </div>
            </li>
        </ul>
      </div>

        </van-list>
      
    </div>
  </div>
</template>

<script>
import { getJsonHometypeData } from "../api/Home.js";
export default {
  data() {
    return {
        value1: 'a',
      value2: 0,
      option1: [
        { text: '默认排序', value: 'a' },
        { text: '销量优先', value: 'b' },
        { text: '价格最低', value: 'c' },
      ],
      option2: [
        { text: '全部城市', value: 0 },
      ],
      list: [],
      lisa: [],
      loading: false,
      finished: false,
      app_url: null,
      title: null,
      cityCode: null,
      city: null,
      p:0,
    };
  },
  methods:{
     onLoad(){
        this.p+=1
        getJsonHometypeData({tagList: this.app_url,cityCode: this.cityCode,p:this.p}).then((data) => {
            this.lisa=this.lisa.concat(data.data.rows);
             this.list=JSON.parse(JSON.stringify(this.lisa))

            // 加载状态结束
            this.loading = false;
            // 数据全部加载完成
            if (data.data.rows.length==0) {
                this.finished = true;
            }
        });
    },
    information(productId,productImgs){
       let productImg = 'https://qiniu-cdn0.jinxidao.com/'+productImgs
      this.$router.push("/details?back=/home&productId="+productId+"&productImg="+productImg)
    },
  },
  created() {
    this.app_url = this.$route.query.app_url;
    this.title = this.$route.query.title;
    this.cityCode = this.$route.query.cityCode;
    console.log(this.app_url);
    console.log(this.title);
    console.log(this.cityCode);
    getJsonHometypeData({tagList: this.app_url,cityCode: this.cityCode}).then((data) => {
            this.city=data.data.struct.city;
            console.log(this.city);
            let num=1
            this.city.forEach(item=>{
                this.option2.push({text: item.name, value: num})
                num+=1
            })
        });

  },
  watch:{
    "value1":function(){
        if(this.value1=='a'){
            this.list=JSON.parse(JSON.stringify(this.lisa))
            console.log(this.lisa);
            console.log(this.list);
        }else if(this.value1=='b'){
            console.log(this.value1);
            var temp=0;
            for(var i =0;i<this.list.length;i++){
                for(var j=i+1;j>0;j--){
                    if(this.list[j].saledCount>this.list[j-1].saledCount){
                        temp = this.list[j];
                        this.list[j]= this.list[j-1];
                        this.list[j-1] = temp;
                    }
                }
            }
        }else if(this.value1=='c'){
            console.log(this.value1);
            var temps=0;
            for(var x =0;x<this.list.length;x++){
                for(var y=x+1;y>0;y--){
                    if(this.list[y].price<this.list[y-1].price){
                        temps = this.list[y];
                        this.list[y]= this.list[y-1];
                        this.list[y-1] = temps;
                    }
                }
            }
        }
    },
    "value2":function(){
        let city= this.option2.filter(item=>{
            return item.value==this.value2
        })
        // console.log(city);
        if(this.value2==0){
            this.list=this.lisa
        }else{

            this.list=this.lisa.filter(e=>{
                // console.log(e.city);
                return e.city==city[0].text
            })
        }
        console.log(this.list);
    }
  }
};
</script>

<style lang="scss" scoped>
.HomeType {
  .wrapper {
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    .header {
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      padding: 0 16px;
      position: sticky;
      left: 0;
      top: 0;
      z-index: 5;

      .header_left {
        color: #fc9632;
        font-size: 20px;
        line-height: 50px;
      }
      .header_center {
        font-size: 18px;
      }
      .header_right {
        width: 20px;
      }
    }
    // .screen{

    // }
    .bodyer{
        ul{
            li{
                padding-top: 25px;
                .img{
                    position: relative;
                    height: 165px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                    .imgtop{
                        width: 100%;
                        position: absolute;
                        bottom: 5px;
                        left: 0;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        color: #fff;
                        .price{
                            padding-left: 16px;
                            display: flex;
                            align-items: center;
                            .newprice{
                                font-size: 20px;
                                span{
                                    font-size: 14px;
                                }
                            }
                            .oldprice{
                                font-size: 14px;
                                padding-left: 8px;
                                color: #ccc;
                            }
                        }
                        .sole{
                            padding-right: 16px;
                            font-size: 13px;
                        }
                    }
                }
                .describe{
                    margin: 10px 16px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }
                .tip{
                    ul{
                        display: flex;
                        padding:5px 16px;
                        li{
                            color: #c3b6a9;
                            background-color: #fef6ed;
                            padding: 2px 10px;
                            border-radius: 10px;
                            font-size: 12px;
                            margin-right: 5px;
                        }
                    }
                }
            }
        }
    }
  }
}
</style>